Adwaita: Update range styling

Adapt to the new CSS nodes for trough rendering. This commit
also brings back visible fill-level rendering for scales, which
was not working for a while. The styling provided for that
(scale trough fill) is just a placeholder to aid in debugging
the implementation.

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 5a6b9bb5ef4af5c6bda85781faeafba46d491491..5766961a4a3da970336be1405a3cf9844218c305 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2153,22 +2153,32 @@ scale {
   &.fine-tune {
     outline-offset: -7px;
     outline-radius: 6px;
-    & trough { border-radius: 4px; }
-    & trough:not(:first-child):not(:last-child),
-    & trough:only-child {
-      margin: 10px;
+    & highlight,
+    & fill,
+    & trough {
+      border-radius: 4px;
+      &:not(:first-child):not(:last-child),
+      &:only-child {
+        margin: 10px;
+      }
+    }
+  }
+
+  & trough,
+  & fill,
+  & highlight {
+    &:not(:first-child):not(:last-child),
+    &:only-child {
+      margin: 12px;
     }
   }
 
   & trough:not(:first-child):not(:last-child),
   & trough:only-child {
-    margin: 12px;
     & slider { margin: 2px 0; }
   }
-
   &.vertical trough:not(:first-child):not(:last-child),
   &.vertical trough:only-child {
-    margin: 12px;
     & slider { margin: 0 2px; }
   }
 
@@ -2228,9 +2238,10 @@ scale {
         &:backdrop { @include button(osd-backdrop); }
       }
     }
-    &.highlight {
+    & highlight {
       @include progressbar_fill;
-      border-color: $selected_borders_color;
+      border: 1px solid $borders_color;
+      border-radius: 3px;
       box-shadow: _widget_edge();
       &.vertical { @include progressbar_fill(vertical); }
       &:backdrop {
@@ -2240,9 +2251,12 @@ scale {
          box-shadow: none;
       }
     }
-    &.progressbar {
+    & fill {
       background: none;
       background-color: red;
+      border: 1px solid $borders_color;
+      border-radius: 3px;
+      box-shadow: _widget_edge();
     }
     &:insensitive, &.vertical:insensitive {
       border-color: $insensitive_borders_color;

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 2c32a3e135a7d507f39a5eda50217ad77fb231b5..d64a88cf76eab058a059603c98bc9f30bea42b18 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2934,18 +2934,16 @@ scale {
   scale.fine-tune {
     outline-offset: -7px;
     outline-radius: 6px; }
-    scale.fine-tune trough {
+    scale.fine-tune highlight, scale.fine-tune fill, scale.fine-tune trough {
       border-radius: 4px; }
-    scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
-      margin: 10px; }
-  scale trough:not(:first-child):not(:last-child), scale trough:only-child {
+      scale.fine-tune highlight:not(:first-child):not(:last-child), scale.fine-tune highlight:only-child, scale.fine-tune fill:not(:first-child):not(:last-child), scale.fine-tune fill:only-child, scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
+        margin: 10px; }
+  scale trough:not(:first-child):not(:last-child), scale trough:only-child, scale fill:not(:first-child):not(:last-child), scale fill:only-child, scale highlight:not(:first-child):not(:last-child), scale highlight:only-child {
     margin: 12px; }
-    scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
-      margin: 2px 0; }
-  scale.vertical trough:not(:first-child):not(:last-child), scale.vertical trough:only-child {
-    margin: 12px; }
-    scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
-      margin: 0 2px; }
+  scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
+    margin: 2px 0; }
+  scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
+    margin: 0 2px; }
   scale trough {
     border: 1px solid #1c1f1f;
     border-radius: 3px;
@@ -3039,19 +3037,23 @@ scale {
           box-shadow: none;
           text-shadow: none;
           icon-shadow: none; }
-    scale trough.highlight {
+    scale trough highlight {
       background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5);
-      border-color: #0f2b48;
+      border: 1px solid #1c1f1f;
+      border-radius: 3px;
       box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
-      scale trough.highlight.vertical {
+      scale trough highlight.vertical {
         background-image: linear-gradient(to right, #215d9c 2px, #266cb5); }
-      scale trough.highlight:backdrop {
+      scale trough highlight:backdrop {
         border-color: #0f2b48;
         background-color: #215d9c;
         box-shadow: none; }
-    scale trough.progressbar {
+    scale trough fill {
       background: none;
-      background-color: red; }
+      background-color: red;
+      border: 1px solid #1c1f1f;
+      border-radius: 3px;
+      box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
     scale trough:insensitive, scale trough.vertical:insensitive {
       border-color: #1c1f1f;
       background-image: none;

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index c46c4f35faca255c28d793252804c2e1dbd78b2a..a088a1c46311e85614a6b833d24150f2dbed5c1d 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -3096,18 +3096,16 @@ scale {
   scale.fine-tune {
     outline-offset: -7px;
     outline-radius: 6px; }
-    scale.fine-tune trough {
+    scale.fine-tune highlight, scale.fine-tune fill, scale.fine-tune trough {
       border-radius: 4px; }
-    scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
-      margin: 10px; }
-  scale trough:not(:first-child):not(:last-child), scale trough:only-child {
+      scale.fine-tune highlight:not(:first-child):not(:last-child), scale.fine-tune highlight:only-child, scale.fine-tune fill:not(:first-child):not(:last-child), scale.fine-tune fill:only-child, scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child {
+        margin: 10px; }
+  scale trough:not(:first-child):not(:last-child), scale trough:only-child, scale fill:not(:first-child):not(:last-child), scale fill:only-child, scale highlight:not(:first-child):not(:last-child), scale highlight:only-child {
     margin: 12px; }
-    scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
-      margin: 2px 0; }
-  scale.vertical trough:not(:first-child):not(:last-child), scale.vertical trough:only-child {
-    margin: 12px; }
-    scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
-      margin: 0 2px; }
+  scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider {
+    margin: 2px 0; }
+  scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider {
+    margin: 0 2px; }
   scale trough {
     border: 1px solid #a1a1a1;
     border-radius: 3px;
@@ -3201,19 +3199,23 @@ scale {
           box-shadow: none;
           text-shadow: none;
           icon-shadow: none; }
-    scale trough.highlight {
+    scale trough highlight {
       background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de);
-      border-color: #184472;
+      border: 1px solid #a1a1a1;
+      border-radius: 3px;
       box-shadow: 0 1px white; }
-      scale trough.highlight.vertical {
+      scale trough highlight.vertical {
         background-image: linear-gradient(to right, #4a90d9 2px, #63a0de); }
-      scale trough.highlight:backdrop {
+      scale trough highlight:backdrop {
         border-color: #4a90d9;
         background-color: #4a90d9;
         box-shadow: none; }
-    scale trough.progressbar {
+    scale trough fill {
       background: none;
-      background-color: red; }
+      background-color: red;
+      border: 1px solid #a1a1a1;
+      border-radius: 3px;
+      box-shadow: 0 1px white; }
     scale trough:insensitive, scale trough.vertical:insensitive {
       border-color: #a1a1a1;
       background-image: none;